<template>
  <div class="kanban-tool flex-row">
    <ul class="kanban-tool__menus">
      <Popover
          trigger="click"
          v-for="menu in menus"
          :key="menu.type"
          placement="bottomRight"
      >
        <template #content>
          <ul class="kanban-tool__data">
            <li
                v-for="item in menu.data"
                :key="item.type"
                class="kanban-tool__data-item"
                @click="onMenuClick(item)"
            >
              <img class="kanban-tool__data-item-img" :src="item.icon" :alt="item.label"/>
              <span class="kanban-tool__data-item-title">{{ item.label }}</span>
            </li>
          </ul>
        </template>
        <li class="kanban-tool__menu flex-col">
          <i :class="menu.icon" />
          <span class="data-menu__title">{{ menu.label }}</span>
        </li>
      </Popover>
    </ul>
  </div>
</template>
<!-- 组件在设置 :ref='() => {}' 的时候，每次 vue 状态被更新，都会被执行。 -->
<script setup>
import { onUpdated } from "vue";
import { Popover } from 'ant-design-vue';

defineProps({
  menus: {
    type: Array,
    default: () => []
  },
  actions: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['click'])
let menuRefs = []
function onMenuClick (menu, index) {
  emit('click', menu)
}
onUpdated(() => menuRefs = [])
</script>

<style scoped>
::v-global(.ant-popover-inner-content) {
  padding: 0;
}
.iconfont {
  font-size: 20px;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.kanban-tool {
  border-bottom: 1px solid #D8DCE6;
  background: #fff;
  justify-content: space-between;
  padding: 0 20px;
}
.kanban-tool__menu {
  height: 80px;
  text-align: center;
  padding: 5px;
  justify-content: center;
  cursor: pointer;
}
.kanban-tool__menu + .kanban-tool__menu {
  margin-left: 20px;
}

.kanban-tool__data {
  height: 508px;
  font-size: 12px;
  overflow-y: auto;
  width: 386px;
  padding: 15px 15px 0 15px;
  box-sizing: border-box;
}
.kanban-tool__data-item {
  margin-left: 28px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 15px;
}
.kanban-tool__data-item:nth-child(3n + 1) {
  margin-left: 0;
}
.kanban-tool__data-item,
.kanban-tool__data-item-img {
  width: 100px;
}
.kanban-tool__data-item-img {
  height: 80px;
  margin-bottom: 10px;
}
</style>
